<script setup lang="ts">
import {ref, watch, defineEmits} from 'vue';

const props = defineProps(
    {
      modelValue: {
        type: Number,
        required: true,
      },
      placeholder: {
        type: String,
        default: '请输入比例',
      }
    }
);
// 定义 emit 用于向父组件发送事件
const emit = defineEmits(['update:modelValue']);
const percentageInput = ref(0.0); // 输入的百分比
// 在组件挂载时，初始设置 percentageInput
onMounted(() => {
  // 确保初始显示值正确
  percentageInput.value = Number((props.modelValue * 100).toFixed(2));
});
watch(
    () => props.modelValue,
    (value) => {
      percentageInput.value = Number((value * 100).toFixed(2));
    }
);

function handlePercentageChange(value) {
  emit('update:modelValue', Number((value / 100).toFixed(2)));
}
</script>

<template>
  <el-input-number
      v-model="percentageInput"
      :min="0"
      :max="100"
      :step="1"
      :controls="false"
      suffix="%"
      @change="handlePercentageChange"
      :placeholder="placeholder"
      style="width: 200px;"
  ></el-input-number>
  <span style="font-weight: 700;font-size: 17px">%</span>
</template>
